<ot-view>

    <div class="row">
        <div class="col-md-12">

            <div class="row">
                <div class="col-md-12 form-inline">

                    <p></p>

                    <!-- Status filter -->
                    <div class="form-group dropdown">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"
                                ng-class="{
                                    'btn-info': jobFilter.state,
                                    'btn-default': !jobFilter.state
                                    }">
                            {{jobFilter.state ? jobFilter.state.description : "Any state"}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a class="ot-action" ng-click="jobFilter.state = undefined;">Any state</a>
                            </li>
                            <li ng-repeat="state in jobFilterResources.states">
                                <a class="ot-action" ng-click="jobFilter.state = state;">{{state.description}}</a>
                            </li>
                        </ul>
                    </div>

                    <!-- Category filter -->
                    <div class="form-group dropdown">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"
                                ng-class="{
                                    'btn-info': jobFilter.category,
                                    'btn-default': !jobFilter.category
                                    }">
                            {{jobFilter.category ? jobFilter.category.description : "Any category"}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a class="ot-action" ng-click="setJobFilterCategory(undefined)">Any state</a>
                            </li>
                            <li ng-repeat="category in jobFilterResources.categories">
                                <a class="ot-action"
                                   ng-click="setJobFilterCategory(category);">{{category.description}}</a>
                            </li>
                        </ul>
                    </div>

                    <!-- Type filter -->
                    <div class="form-group dropdown">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"
                                ng-class="{
                                    'btn-info': jobFilter.type,
                                    'btn-default': !jobFilter.type
                                    }">
                            {{jobFilter.type ? jobFilter.type.description : "Any type"}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a class="ot-action" ng-click="jobFilter.type = undefined;">Any type</a>
                            </li>
                            <li ng-repeat="type in jobFilterResources.types[jobFilter.category.name]">
                                <a class="ot-action"
                                   ng-click="jobFilter.type = type;">{{type.description}}</a>
                            </li>
                        </ul>
                    </div>

                    <!-- Error filter -->
                    <div class="form-group dropdown">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"
                                ng-class="{
                                    'btn-info': jobFilter.errorOnly,
                                    'btn-default': !jobFilter.errorOnly
                                    }">
                            {{jobFilter.errorOnly ? "Jobs in error" : "Any error status"}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a class="ot-action" ng-click="jobFilter.errorOnly = false;">Any error status</a>
                                <a class="ot-action" ng-click="jobFilter.errorOnly = true;">Jobs in error</a>
                            </li>
                        </ul>
                    </div>

                    <!-- Description filter (text box) -->
                    <div class="form-group">
                        <input class="form-control col-md-4" type="text" ng-model="jobFilter.description"
                               placeholder="Description filter"
                               ng-class="{
                                'bg-info': jobFilter.description
                               }"/>
                    </div>

                    <!-- Search button -->
                    <div class="form-group">
                        <button type="button"
                                ng-disabled="loadingJobs"
                                ng-click="loadJobs()"
                                class="btn btn-primary">
                            <span class="fa fa-search"></span>
                        </button>
                    </div>

                    <!-- Clear button -->
                    <div class="form-group">
                        <button type="button"
                                ng-disabled="loadingJobs"
                                ng-click="clearJobFilter()"
                                title="Clears current filter and reloads the jobs"
                                class="btn btn-default">
                            <span class="fa fa-ban"></span>
                        </button>
                    </div>

                    <!-- Previous button -->
                    <div class="form-group">
                        <button type="button"
                                ng-disabled="!jobs.pagination.prev || loadingJobs"
                                ng-click="previousPage()"
                                title="Previous page"
                                class="btn btn-default">
                            <span class="fa fa-backward"></span>
                        </button>
                    </div>

                    <!-- Current page -->
                    <div class="form-group">
                        <span>
                            {{page.offset}}-{{page.offset + page.limit}} / {{page.total}}
                        </span>
                    </div>

                    <!-- Next button -->
                    <div class="form-group">
                        <button type="button"
                                ng-disabled="!jobs.pagination.next || loadingJobs"
                                ng-click="nextPage()"
                                title="Next page"
                                class="btn btn-default">
                            <span class="fa fa-forward"></span>
                        </button>
                    </div>

                    <!-- Menu -->
                    <div class="form-group dropdown">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            Actions
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li ng-show="jobs && jobs._pause">
                                <a class="ot-action"
                                   title="Stops running new jobs - current executions are not stopped."
                                   ng-click="pauseJobs()">
                                    <span class="fa fa-pause"></span>
                                    Stops running jobs
                                </a>
                            </li>

                            <li ng-show="jobs && jobs._resume">
                                <a class="ot-action" ng-click="resumeJobs()">
                                    <span class="fa fa-play"></span>
                                    Resumes running jobs
                                </a>
                            </li>

                            <li><a class="ot-action" ng-click="pauseAllSelected()">
                                <span class="fa fa-pause"></span>
                                Pause all visible jobs
                            </a></li>

                            <li><a class="ot-action" ng-click="resumeAllSelected()">
                                <span class="fa fa-refresh"></span>
                                Resume all visible jobs
                            </a></li>
                        </ul>
                    </div>

                    <div class="form-group">
                        <button type="button"
                                ng-disabled="true"
                                ng-show="loadingJobs"
                                class="btn btn-default">
                            <span class="ot-loading-indicator"></span>
                            <span>Loading jobs...</span>
                        </button>
                    </div>

                </div>
            </div>

            <!-- Scheduler status -->
            <div class="row" ng-show="jobs && jobs._resume" style="margin-top: 4px;">
                <div class="col-md-12">
                    <div class="alert alert-warning form-group">
                        <b class="form-control-static text-danger">
                            Execution of jobs has been stopped.
                            <a class="ot-action" ng-click="resumeJobs()">Resume their execution.</a>
                        </b>
                    </div>
                </div>
            </div>

            <table class="ot-admin-console-jobs" ng-if="jobs">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Category</th>
                    <th>Type</th>
                    <th>Description</th>
                    <th>State</th>
                    <th>Action</th>
                    <th>Schedule</th>
                    <th>Run count</th>
                    <th>Last duration</th>
                    <th>Error(s)</th>
                    <th>Last run</th>
                    <th>Next run</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="job in jobs.resources"
                    class="ot-job ot-job-{{job.state.toLowerCase()}}">
                    <td>
                        {{job.id}}
                    </td>
                    <td>
                        {{job.key.type.category.name}}
                    </td>
                    <td>
                        {{job.key.type.name}}
                    </td>
                    <td>
                        {{job.description}}
                    </td>
                    <td>
                        <span ng-if="job.state == 'IDLE'" class="fa fa-cog fa-2x text-muted" title="Idle"></span>
                        <span ng-if="job.state == 'RUNNING'" class="fa fa-cog fa-spin fa-2x text-success"
                              title="Running"></span>
                        <span ng-if="job.state == 'PAUSED'" class="fa fa-pause fa-2x text-info" title="Paused"></span>
                        <span ng-if="job.state == 'DISABLED'" class="fa fa-ban fa-2x text-muted"
                              title="Disabled"></span>
                        <span ng-if="job.state == 'INVALID'" class="fa fa-trash fa-2x text-danger"
                              title="Invalid - will be removed at next run"></span>
                    </td>
                    <td>
                        <span
                                ng-if="job._launch"
                                title="Launches this job immediately"
                                ng-click="launchJob(job)"
                                class="fa fa-play fa-2x ot-command"></span>
                        <span
                                ng-if="job._pause"
                                title="Pauses this job - automatic schedule will be on hold"
                                ng-click="pauseJob(job)"
                                class="fa fa-pause fa-2x ot-command"></span>
                        <span
                                ng-if="job._resume"
                                title="Resumes this job - automatic schedule will be restored"
                                ng-click="resumeJob(job)"
                                class="fa fa-refresh fa-2x ot-command"></span>
                        <span
                                ng-if="job._stop"
                                title="Stops this job"
                                ng-click="stopJob(job)"
                                class="fa fa-stop fa-2x ot-command"></span>
                        <span
                                ng-if="job._delete"
                                title="Deletes this job"
                                ng-click="deleteJob(job)"
                                class="fa fa-trash fa-2x ot-command"></span>
                    </td>
                    <td>
                        {{job.schedule.periodText}}
                    </td>
                    <td>
                        {{job.runCount}}
                    </td>
                    <td>
                        {{jobDuration(job.lastRunDurationMs)}}
                    </td>
                    <td>
                        <span ng-if="job.lastErrorCount == 0">-</span>
                        <span ng-if="job.lastErrorCount > 0" title="{{job.lastError}}">
                            <span class="fa fa-times text-danger"></span>
                            {{job.lastErrorCount}}
                        </span>
                    </td>
                    <td>
                        {{job.lastRunDate | date:'shortDate'}}
                        {{job.lastRunDate | date:'shortTime'}}
                    </td>
                    <td>
                        {{job.nextRunDate | date:'shortDate'}}
                        {{job.nextRunDate | date:'shortTime'}}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

</ot-view>